<template>
<!--  主体框-->
  <div class="mymain">
    <tabarmount></tabarmount>
    <div v-for="(item,index) in orderItemList" :key="index" v-if="item.status">
      <l-slide-view class="l-slide-view" width="750" height="220" slide-width="200" auto-close="true" >
        <div class="slide-view-left" slot="left">
          <!--装饰用的图片-->
          <img  class="slide-view-img" src="/static/images/user.png"/>

          <!-- 日期与时段信息-->
          <div class="eat-detail">
            <!-- 日期-->
            <div>
             <img class="detail-icon" src="../../../static/icon/date.png" />
             <text>{{item.date}}</text>
            </div>
            <!-- 时段-->
            <div>
              <img class="detail-icon" src="../../../static/icon/time.png" />
              <text>{{item.time}}</text>
            </div>
          </div>
        </div>
        <div class="slide-view-right" slot="right" >
          <img @click="cancelItem(item)" src="/static/icon/cancel.png">
        </div>
      </l-slide-view>
    </div>
  </div>
</template>

<script>
import tabarmount from '../../components/tabarmount'
export default {
  name: 'index',
  data(){
    return{
      orderItemList:[{orderId:0,date:"2021-05-1",time:"下午5点",status:true},
        {orderId:1,date:"2021-05-1",time:"下午5点",status:true},
        {orderId:2,date:"2021-05-1",time:"下午5点",status:true},
        {orderId:1,date:"2021-05-1",time:"下午5点",status:true},
        {orderId:2,date:"2021-05-1",time:"下午5点",status:true},
        {orderId:1,date:"2021-05-1",time:"下午5点",status:true},
        {orderId:2,date:"2021-05-1",time:"下午5点",status:true},
        {orderId:1,date:"2021-05-1",time:"下午5点",status:true},
        {orderId:2,date:"2021-05-1",time:"下午5点",status:true},
        {orderId:1,date:"2021-05-1",time:"下午5点",status:true},
        {orderId:2,date:"2021-05-1",time:"下午5点",status:true}
      ],
    }
  },
  components: {
    tabarmount
  },
  watch:{

  },
  computed:{
    orderItemList(){
    }
  },
  methods: {
    //删除报餐订单，缺网络请求
    cancelItem(e){
      e.status=false
    }
  }
}
</script>
<style scoped>
.mymain{
  width: 100%;
  height: auto;
  position: relative;
}
.mymain > div{
  width: 100%;
  height: 200rpx;
  margin: 10rpx 0rpx;
  border-radius: 10rpx;
  box-shadow: 10rpx 10rpx 10rpx #888888;
  border: #888888 1rpx solid;
  border-top: hidden;
}
.slide-view-right{
  margin: 10rpx;
  width: 180rpx;
  height: 180rpx;
  background-color: #ffd2db;
  border-radius: 10rpx;
}

.slide-view-right > img{
  height: 90rpx;
  width: 90rpx;
  padding: 45rpx;
}

.slide-view-left{
  display: flex;
  justify-content: left;
}

.eat-detail{
  width: 470rpx;
  height: 180rpx;
  margin: 10rpx 30rpx;
}

.eat-detail > div{
  width: 100%;
  height: 70rpx;
  margin-top: 20rpx;
  display: flex;
  justify-content: space-between;
}
.slide-view-img{
  height: 180rpx;
  width: 180rpx;
  margin: 10rpx;
}
.detail-icon{
  height: 70rpx;
  width: 70rpx;
}

.detail-icon + text {
  text-align: center;
  height: 60rpx;
  width: 80%;
  margin: 5rpx 0rpx;
  border-bottom: #cbcbcb solid 1rpx;
  font-size: 30rpx;
}
</style>
